沒想到最後還是報名鐵人賽了呢（笑）。在寫程式遇到麻煩 google 時，找到的文章常常是從鐵人賽裡面出來的系列文，很是感激這個活動，產出了許多優質參考資料。
我在報名的時候，在想說自己能夠寫什麼題目：最後的決定是寫 gulp 4.0。雖然 gulp 似乎有 退環境 退流行的趨勢，但最後還是決定寫它。一方面是因為，gulp 是我第一個學到的前端建構工具；一方面是因為，我想透過升級過去專案（用 gulp 3.9.1）的方式，來重新認識自己進步了多少，能夠自己排除錯誤、完成系列文到什麼程度。
有個學習目標，感覺會比較有動力寫下去，我決定幫自己訂個學習目標。我希望在寫這系列文的期間，能夠順便學到這些東西：
最後是草擬的大綱。不曉得會跟最後寫出來的東西差異有多大呢（笑）
| 標題 | 摘要/內容 |
|---|---|
| 前言：參賽目的 | 參賽的目的，想獲得什麼 |
| Gulp 介紹 | 前端工程化的歷史Gulp 的地位升級到 Gulp4 的優點 |
| Gulp 環境配置 | 先前作品介紹幫先前的 side project 升級先測試還能跑gulp -v |
| 來自 Gulp 的 hello world | 將 package.json、gulpfile.js 砍掉重新建構 Gulp 環境* 建立 task，console.log |
| 第一個 task 例子：複製檔案 | 複製檔案、_variables.scss* gulp 3.9.1 常用的 api，task、src、dest、watch* pipe API (node)* stream* Gulp 4 與 3.9.1 的差異、gulp3、gulp4寫法(ES6、CommonJS) |
| 第一個插件：清除暫存 | 把 public、tmp 刪掉* 使用插件* gulp-clean 插件的使用與時機、del* gulp 插件黑名單 |
| HTML 的處理 | HTML 的處理過程* glob* gulp-plumber* gulp-frontMatter* gulp-layout |
| HTML 的處理 | HTML 的處理過程* gulp-if* gulp-pug |
| CSS 的處理 | CSS 的處理過程* sourcemaps * gulp-sass* gulp-postcss |
| vendor JS 的處理 | vendor JS 的處理* gulp-concat |
| ES6 JS 的處理 | ES6 JS 的處理* gulp-babel* gulp-uglify |
| 圖片壓縮 | 圖片壓縮的過程* gulp-imagemin* gulp-if (不確定要擺哪) |
| 本地端伺服器 | 建立本地端 server* browerSync |
| 監控檔案變動 | 監控檔案變動，重整頁面、執行編譯工作* watch* gulp-watch |
| 佈署專案 | 佈署專案* gulp-ghPages |
| Gulp 的未來 | 前端工程化的現況前端工程化的未來 |
iThome鐵人賽
看影片追技術